<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px
        }

        #box {
            width: 800px;
            height: 700px;
            margin: 10px auto;
            border: solid 1px green;
            border-radius: 30px
        }

        #questions,
        #answers {
            float: left;
            height: 660px;
            width: 350px;
            padding: 20px
        }

        #questions {
            border-right: dashed 1px gray;
        }

        #questions>h1,
        #answers>h1 {
            font-size: 14px;
            text-align: center;
            margin-bottom: 20px
        }

        #box ul {
            margin: 5px 0 30px;
            clear: both;
        }

        #box ul>li {
            margin-top: 5px;
            height: 20px;
            line-height: 20px;
        }

        #textAreaBox {
            width: 250px;
            height: 60px;
            display: block;
        }

        [v-cloak] {
            display: none;
        }

        .title:hover {
            background-color: #ddd;
        }

        .del {
            display: none;
            float: right;
        }

        .title:hover .del {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="box" v-cloak>
        <div id="questions">
            <h1>提问区</h1>
            <ul v-for="(obj, index) in questionList">
                <h3 class="title">{{index+1}}.{{obj.title}}
                    <!-- #:锚点，跳到当前页顶部 .pervent-->
                    <a href="#" class="del" @click="onDelete(index)">删除</a>
                </h3>
                <label v-if="obj.type === 'text'">
                    <li><input v-bind:type="obj.type" v-bind:name="obj.name" v-model="obj.answer"></li>
                </label>
                <label v-if="obj.type === 'radio'">
                    <li v-for="option in obj.options"><input v-bind:type="obj.type" v-bind:name="obj.name"
                            v-model="obj.answer" :value="option.value">{{option.label}}</li>
                </label>
            </ul>

        </div>
        <div id="answers">
            <h1>答案收集</h1>
            <ul v-for="(obj,index) in questionList">
                <h3>{{index+1}}.{{obj.title}}</h3>
                <li>{{obj.answer}}</li>
            </ul>

            <h1>添加问题</h1>
            <h3>问题描述:</h3>
            <input type="text" placeholder="请输入问题" v-model="newQuestion.title">
            <h3>问题类型</h3>
            <select v-model="newQuestion.type">
                <option :value="obj.type" v-for="(obj,index) in selectOptions">{{obj.label}}</option>
            </select>
            <div v-if="newQuestion.type !== 'text' && newQuestion.type!=='textarea'">
                <h3>选项:</h3>
                <label v-for="(obj,index) in newQuestion.options">
                    <p>{{index+1}}.<input type="text" v-model="obj.label"></p>
                </label>
                <button @click="onAdd">添加选项</button>
                <h3><button @click="onSubmit">提交</button></h3>
            </div>

        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript">
        const app = Vue.createApp({
            data: function () {
                return {
                    questionList: [
                        {
                            title: "请输入你的姓名?",
                            type: "text",
                            name: "username",
                            answer: ""
                        },
                        {
                            title: "请输入你的性别?",
                            type: "radio",
                            name: "sex",
                            answer: "",
                            options: [
                                {
                                    value: "男",
                                    label: "男"
                                },
                                {
                                    value: "女",
                                    label: "女"
                                },
                                {
                                    value: "未知",
                                    label: "未知"
                                }
                            ]
                        },

                    ],


                    newQuestion: {
                        title: '',
                        type: 'text',
                        name: 'n' + Date.now(),
                        answer: [],
                        options: [
                            { value: '', label: '' },
                            { value: '', label: '' },
                        ]
                    },

                    selectOptions: [
                        { type: 'text', label: '文本框' },
                        { type: 'radio', label: '单选框' },
                        { type: 'checkbox', label: '多选框' },
                        { type: 'select', label: '下拉框' },
                        { type: 'textarea', label: '文本域' },
                    ]
                }
            },
            methods: {
                onDelete(index) {
                    //数组删除 shift pop splice
                    this.questionList.splice(index, 1);
                },
                onAdd() {
                    this.newQuestion.options.push({
                        value: '', label: ''
                    })
                },
                onSubmit() {
                    //提交  复制对象(ES6):{...this.newQuestion}
                    this.questionList.push({ ...this.newQuestion });

                    // 清空
                    this.newQuestion = {
                        title: '',
                        type: 'text',
                        name: 'n' + Date.now(),
                        answer: [],
                        options: [
                            { value: '', label: '' },
                            { value: '', label: '' },
                        ]
                    }
                }
            },
        });
        //    将app实例挂载到div中
        app.mount('#box');

    </script>

</body>

</html>